/**
 * 区域分布
 */
import { defineComponent } from 'vue';
import AnimationBar from '@common/animationBar';
import { ToThousandsTOOL } from '@/utils';
import { SuzhouDistrictMap } from '@config/map';
import './style.scss';

export default defineComponent({
  name: 'RegionDistribution',
  props: {
    title: String,
    data: {
      type: Array,
      required: true,
      default: () => [],
    },
  },
  render(props) {
    // 取总数，用于计算百分比
    const sum = props.data.reduce((total: number, c: any) => {
      return c.value < 0 ? total + 0 : total + c.value;
    }, 0);

    let sortedData = props.data;
    sortedData = sortedData?.sort?.((a: any, b: any) => b.value - a.value);

    // 无数据时显示默认区县
    if (sortedData.length === 0 || !sortedData) {
      sortedData = SuzhouDistrictMap.map((s) => {
        s.rank = '-';
        return s;
      });
    }

    return (
      <div id="RegionDistribution">
        <header>{props.title}区域分布</header>
        <ul>
          {sortedData.map((info: any) => {
            const noValue = info.value < 0;
            const percent = ((info.value / sum) * 100).toFixed(2);

            return (
              <li>
                <header>
                  <em>No.{info?.rank ?? '-'}</em>

                  {info.name}
                </header>

                <AnimationBar
                  class="AnimationBar"
                  color={{
                    bar: 'linear-gradient(270deg, #1EE7E7 0%, #1890FF 100%)',
                    circle: '#39efff',
                    circleBorder: '#39efff30',
                  }}
                  value={noValue ? 0 : Number(percent)}
                  width={254}
                  option={{
                    height: 8,
                    margin: '-14px',
                    percentText: {
                      display: 'none',
                    },
                  }}
                />
                <section>{noValue ? '- ' : ToThousandsTOOL(info.value)}家</section>
              </li>
            );
          })}
        </ul>
      </div>
    );
  },
});
